<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
    body{
        margin:0;
    }
    header  {
        height:900px;
        background-IMAGE: url(2.jpg);
        background-size: cover;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }
    button  {
        position: relative;
        top: 100px;
        width: 130px;
        height: 45px;
        background-color: transparent;
        color: #fff;
        font-size: 20px;
        border: 1px solid #fff;
        outline: none;
        border-radius: 100px;
        cursor: pointer;
    }
    button:hover {
        background-color: #fff;
        color:#009966;
    }
    div
    {
        height: 260px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        span{
        font-size: 64px;
        color: #e96d4f;
        }
    article{
        height:600px;
        background-IMAGE: url(1.jpg);
        background-size: cover;
        background-attachment:fixed;
    }
    main {
        height:580px;
        position:relative;
    }
    main>img{
position:absolute;
bottom:0;
left:180px;
    }
    main>aside{
        width: 600px;
        position: absolute;
        top: 200px;
        right: 200px;
        text-align: right;
    }
    aside>h1{
        font-size:  50px;
    }
    aside>p
    {
        font-size: 20px;
        color:#555;
    }
    aside>p>a{
text-decoration: none;
color:#12b7f5;
    }
    map{
        display: block;
        width: 100%;
        height:600px;
    }
    </style>

</head>
<body>

<header>

<img src="4.png" alt="">

<button>立即下载</button>

</header>

<div>
    <span>乐·在·沟·通</span>
</div>
<article></article>
<main>
    <img src="5.png" alt="">
    <aside>
    <h1>沟 通 ， 是 跨 越<br/>千 山 万 水 的 亲 切 声 音</h1>
    <p>无论何时何地，你都能自由享受QQ在各类终端<br/>上带来的高清通话，与好友一起想聊多久聊多久</p>
    <p><a href="http://im.qq.com/album/v/" >了解更多 &gt;</a></p>


    </aside>
</main>
<map id="here"></map>
</body>
<script src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script>
function initMap() {
    var map = new BMap.Map("here");
    var point = new BMap.Point(108.946023, 34.331407);
    map.centerAndZoom(point, 19);
    window.map = map;
}
initMap();
</script>

</html>